<template>
  <div className="screen-wrapper"  >
      <div className="screen"  id="screen">
          <div className="demo-root">
              <header>
                <div v-if="nowWeather" class="pre">
                  <div>当前城市：{{ city }}</div>
                  <div class="weather">
                    <span>{{ nowWeather.temp }}°C</span>
                    <span>{{ nowWeather.text }}</span>
                  </div>
                </div>
                <div class="content">数据可视化博客大屏</div>
                <div class="after">{{ formattedTime }}  </div>
              </header>
              <main>
                  <div className="demo-left">
                    <BasicData class="box"></BasicData>
                    <LineChart ></LineChart>
                    <RadarBar ></RadarBar>
                  </div>

                  <div className="demo-center">
                    <!-- 快捷菜单 点击跳回后台 -->
                    <ChartPanel class="box"></ChartPanel>
                  </div>

                  <div className="demo-right">
                    <BarChart class="box"></BarChart>
                    <HotTag class="box"></HotTag>
                    <HotArticle class="box"></HotArticle>
                  </div>
              </main>
              <footer>欢迎来到码海航行数据可视化博客平台</footer>
          </div>
      </div>
      <footer className="large-footer"></footer>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, computed } from 'vue';
import HotArticle from '@/components/visualization/HotArticle.vue'
import HotTag from '@/components/visualization/HotTag.vue'
import BarChart from '@/components/visualization/BarChart.vue'
import ChartPanel from '@/components/visualization/ChartPanel.vue'
import BasicData from '@/components/visualization/BasicData.vue'
import RadarBar from '@/components/visualization/RadarBar.vue'
import LineChart from '@/components/visualization/LineChart.vue'
import { getIpLocation } from '@/api/common/gaode'
import { getNowWeatherService } from '@/api/common/hefeng'

onMounted(() => {
  //初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  //绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();
});

//数据大屏自适应函数
function handleScreenAuto() {  
    // 设计稿的宽度和高度  
    const designDraftWidth = 1920;  
    const designDraftHeight = 1080;  
  
    // 根据屏幕的变化适配的比例  
    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?  
        (document.documentElement.clientWidth / designDraftWidth) :  
        (document.documentElement.clientHeight / designDraftHeight);  
  
    // 缩放比例并保持居中  
    const screenElement = document.querySelector('#screen');  
    screenElement.style.transform = `scale(${scale}) translate(-50%)`;  
}

const formattedTime = ref('');  
  
const updateTime = () => {  
  const now = new Date();  
  const year = now.getFullYear();  
  const month = String(now.getMonth() + 1).padStart(2, '0');  
  const day = String(now.getDate()).padStart(2, '0');  
  const hours = String(now.getHours()).padStart(2, '0');  
  const minutes = String(now.getMinutes()).padStart(2, '0');  
  const seconds = String(now.getSeconds()).padStart(2, '0');  
  formattedTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;  
}; 

let timer = null
// 在组件挂载后更新时间，并设置定时器每秒更新一次  
onMounted(() => {  
  updateTime();  
  timer = setInterval(updateTime, 1000);  
  return () => clearInterval(timer); // 在组件卸载时清除定时器  
});


// 在组件卸载时清除定时器  
onUnmounted(() => {  
  clearInterval(timer);  
});


// 当前IP定位经纬度
const location = ref(null)
// 当前IP定位城市
const city = ref(null)
// 一进页面就获取 IP定位
const initLocation = async () => {
  const res = await getIpLocation();
  if (res.data) {
    location.value = res.data.rectangle.split(';')[0]
    city.value = res.data.city
  }
  fetchWeatherData()
}
// 定义实时天气
const nowWeather = ref(null)
// 获取位置和更新天气信息
const fetchWeatherData = async () => {
  if (location.value) {
    const ResNowWeather = await getNowWeatherService(location.value);
    if (ResNowWeather.code == 200) {
      nowWeather.value = ResNowWeather.now;
    }
  }
}
initLocation()

// const rotateDegrees = computed(() => ({
//   transform: 'scale(0.4) rotate(90deg)',
// }))


</script>
<style lang="scss" scoped >
.screen-wrapper {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;
        height: 1080px;
        transform-origin: 0 0;
        position: absolute;
        left:50%;
        background: url('@/assets/visualization/bg.jpg') no-repeat center center/ cover;
        color: white;
        .demo-root{
            header{
                display: flex;
                align-items: center;
                width: 1920px;
                height: 80px;
                font-size: 40px;
                text-align: center;
                line-height: 75px;
                background: url('@/assets/visualization/top.png') no-repeat center center / cover;
                .pre {
                  display: flex;
                  width: 540px;
                  font-size: 26px;
                  text-align: left;
                  .weather {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    line-height: 100%;
                    margin-left: 20px;
                  }
                }
                .content {
                  width: 840px;
                }
                .after {
                  width: 540px;
                  font-size: 30px;
                  text-align: right;
                }
            }
            main{
                display: flex;
                height: 920px;
                div{
                    width: 640px;
                    height: 100%;
                }
                .demo-left{
                    width: 540px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 33%;
                    }
                }
                .demo-center{
                    width: 840px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 100%;
                    }
                }
                .demo-right{
                    width: 540px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 33%;
                    }
                }
            }
            footer{
                width: 100%;
                height: 80px;
                font-size: 40px;
                text-align: center;
                line-height: 100px;
                background: url('@/assets/visualization/bottom_box.png') no-repeat center center / cover;
            }
        }
    }
  }


@media (max-width: 768px) {
  .screen-wrapper {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;
        height: 1080px;
        transform: scale(0.4) !important;
        rotate: 90deg;
        transform-origin: 0 0;
        position: absolute;
        top: 8.5%;
        left:100%;
        background: url('@/assets/visualization/bg.jpg') no-repeat center center/ cover;
        color: white;
        .demo-root{
            header{
                display: flex;
                align-items: center;
                width: 1920px;
                height: 80px;
                font-size: 40px;
                text-align: center;
                line-height: 75px;
                background: url('@/assets/visualization/top.png') no-repeat center center / cover;
                .pre {
                  display: flex;
                  width: 540px;
                  font-size: 26px;
                  text-align: left;
                  .weather {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    line-height: 100%;
                    margin-left: 20px;
                  }
                }
                .content {
                  width: 840px;
                }
                .after {
                  width: 540px;
                  font-size: 30px;
                  text-align: right;
                }
            }
            main{
                display: flex;
                height: 920px;
                div{
                    width: 640px;
                    height: 100%;
                }
                .demo-left{
                    width: 540px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 33%;
                    }
                }
                .demo-center{
                    width: 840px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 100%;
                    }
                }
                .demo-right{
                    width: 540px;
                    background: rgba(18, 28, 55, 0.5);
                    .box {
                      width: 100%;
                      height: 33%;
                    }
                }
            }
            footer{
                width: 100%;
                height: 80px;
                font-size: 40px;
                text-align: center;
                line-height: 100px;
                background: url('@/assets/visualization/bottom_box.png') no-repeat center center / cover;
            }
        }
    }
}
}
</style>